<!-- 分类 -->
<template>
    <div class="myVideo">
        <section class="search-wrap" ref="searchWrap">
            <!-- 商品类别 -->
            <div class="nav-side-wrapper">
                <ul class="nav-side">
                    <!-- 遍历出具体的商品类别 -->
                    <li v-for="(item, index) in categoryDatas" :key="index" :class="{ active: currentIndex === index }"
                        @click="selectMenu(index)">
                        <span>{{ item.name.slice(0, 2) }}</span>
                        <span>{{ item.name.slice(2) }}</span>
                    </li>
                </ul>
            </div>
            <!-- 不同类别的商品 -->
            <div class="search-content">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <template v-for="(category, index) in categoryDatas">
                            <div class="swiper-slide" :key="index" v-if="currentIndex === index">
                                <div v-for="(products, index) in category.list" :key="index">
                                    <router-link to="/details">
                                        <p class="goods-title">{{ products.title }}</p>
                                        <div class="category-list">
                                            <!-- 遍历出具体的商品 -->
                                            <div class="product-item" v-for="(product, index) in products.productList"
                                                :key="index">
                                                <img class="item-img" :src="product.imgUrl" />
                                                <p class="product-title">{{ product.title }}</p>
                                            </div>
                                        </div>
                                    </router-link>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </div>
        </section>
        <tabbar></tabbar>
    </div>
</template>
  
<script setup lang="ts">
import { ref, reactive } from "vue";

const searchWrap = ref(null);
const currentIndex = ref(0);
// 修改currentIndex的值为index
const selectMenu = index => {
    currentIndex.value = index;
};
// 商品数据
const categoryDatas = reactive(
    [
        {
            name: '水果',
            mainImgUrl: '',
            list: [
                {
                    title: '水果',
                    productList: [
                        {
                            title: '西瓜',
                            imgUrl: 'src/assets/sort/sort1.png'
                        },
                        {
                            title: '葡萄',
                            imgUrl: 'src/assets/sort/sort2.png'
                        },
                        {
                            title: '菠萝',
                            imgUrl: 'src/assets/sort/sort3.png'
                        },
                        {
                            title: '橘子',
                            imgUrl: 'src/assets/sort/sort4.png'
                        },
                        {
                            title: '石榴',
                            imgUrl: 'src/assets/sort/sort5.png'
                        },
						{
						    title: '苹果',
						    imgUrl: 'src/assets/sort/sort6.png'
						}
                    ]
                }
            ]
        },
        {
            name: '蔬菜',
            mainImgUrl: '',
            list: [
                {
                    title: '蔬菜',
                    productList: [
                        {
                            title: '西红柿',
                            imgUrl: 'src/assets/sort/sort7.png'
                        },
                        {
                            title: '西兰花',
                            imgUrl: 'src/assets/sort/sort8.png'
                        },
                        {
                            title: '胡萝卜',
                            imgUrl: 'src/assets/sort/sort9.png'
                        }
                    ]
                }
            ]
        }
    ]
)
</script>
<style scoped lang="scss" src="./index.scss"></style>
